<template>
  <div class="aui-card-list">
  <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
    <el-col :span="6">
        <el-form-item :label="$t('process.name')">
          <el-input v-model="dataForm.processName" :placeholder="$t('process.name')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('process.key')">
          <el-input v-model="dataForm.key" :placeholder="$t('process.key')" clearable></el-input>
        </el-form-item>
      </el-col>
  </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-button type="primary" @click="deployHandle()">{{ $t('process.deployFile') }}</el-button>
          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element"
          remote-sort @sort-change="dataListSortChangeHandle" @select-change="dataListSelectionChangeHandleVex"
          @select-all="dataListSelectionAllChangeHandleVex" max-height="auto">
          <vxe-table-column type="checkbox" width="50" align="center"></vxe-table-column>
          <vxe-table-column field="id" title="process.id"></vxe-table-column>
          <vxe-table-column field="name" title="process.name"></vxe-table-column>
          <vxe-table-column field="key" title="process.key"></vxe-table-column>
          <vxe-table-column field="version" title="process.version" width="60" align="center"></vxe-table-column>
          <vxe-table-column field="resourceName" title="process.resourceName" width="80" align="center">
            <template slot-scope="scope">
              <a :href="getResourceURL(scope.row.deploymentId, scope.row.resourceName)" target="_blank">XML文件</a>
            </template>
          </vxe-table-column>
          <vxe-table-column field="diagramResourceName" title="process.diagramResourceName" width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="getImageByDialog(scope.row.deploymentId, scope.row.diagramResourceName)">
                流程图
              </el-button>
            </template>
          </vxe-table-column>
          <vxe-table-column field="deploymentTime" title="process.deploymentTime" width="140" align="center">
          </vxe-table-column>
          <vxe-table-column title="handle" width="200" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.suspended" type="text" size="small" @click="activeHandle(scope.row.id)">
                {{ $t('process.active') }}
              </el-button>
              <el-button v-else type="text" icon="el-icon-time" size="small" @click="suspendHandle(scope.row.id)">
                {{ $t('process.suspend') }}
              </el-button>
              <el-button type="text" icon="el-icon-delete" size="small" @click="deleteHandle(scope.row.deploymentId)">
                {{ $t('delete') }}
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-dropdown split-button type="text" size="small">
                {{ $t('more') }}
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text" icon="el-icon-setting" size="small"
                      @click="configNode(scope.row.id,scope.row.key)">
                      {{ $t('process.configNode') }}
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" icon="el-icon-sort" size="small" @click="convertToModelHandle(scope.row.id)">
                      {{ $t('process.convertToModel') }}
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <!-- 弹窗, 部署流程文件 -->
        <deploy v-if="deployVisible" ref="deploy" @refreshDataList="getDataList"></deploy>
      </div>
    </el-card>
    <el-dialog title="流程图图片" :visible.sync="dialogVisible" :width="'90%'">
      <img :src="imgUrl" />
    </el-dialog>
    <process-config v-if="taskVisible" ref="processConfig" @refreshDataList="getDataList"></process-config>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import Deploy from './process-deploy'

import ProcessConfig from './process-task-config'
import qs from 'qs'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/act/process/page',
        getDataListIsPage: true,
        deleteURL: '/act/process',
        deleteIsBatch: true,
        deleteIsBatchKey: 'deploymentId'
      },
      dataForm: {
        processName: '',
        key: ''
      },
      deployVisible: false,
      dialogVisible: false,
      taskVisible: false,
      imgUrl: ''
    }
  },
  components: {
    Deploy,
    ProcessConfig
  },
  methods: {
    // 获取流程(xml/image)url地址
    getResourceURL (id, name) {
      var params = qs.stringify({
        'token': this.$cookies.get('token'),
        'deploymentId': id,
        'resourceName': name
      })
      return `${window.SITE_CONFIG['apiURL']}/act/process/resource?${params}`
    },
    getImageByDialog (id, name) {
      this.dialogVisible = true
      var params = qs.stringify({
        'token': this.$cookies.get('token'),
        'deploymentId': id,
        'resourceName': name
      })
      this.imgUrl = `${window.SITE_CONFIG['apiURL']}/act/process/resource?${params}`
    },
    // 部署流程文件
    deployHandle () {
      this.deployVisible = true
      this.$nextTick(() => {
        this.$refs.deploy.init()
      })
    },
    configNode (id, key) {
      this.taskVisible = true
      this.$nextTick(() => {
        this.$refs.processConfig.processId = id
        this.$refs.processConfig.modelKey = key
        this.$refs.processConfig.visible = true
        this.$refs.processConfig.init()
      })
    },
    // 激活
    activeHandle (id) {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('process.active') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.put(`/act/process/active/${id}`).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getDataList()
            }
          })
        }).catch(() => { })
      }).catch(() => { })
    },
    // 挂起
    suspendHandle (id) {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('process.suspend') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.put(`/act/process/suspend/${id}`).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getDataList()
            }
          })
        }).catch(() => { })
      }).catch(() => { })
    },
    // 转换为模型
    convertToModelHandle (id) {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('process.convertToModel') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post(`/act/process/convertToModel/${id}`).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getDataList()
            }
          })
        }).catch(() => { })
      }).catch(() => { })
    }
  }
}
</script>
